<template>
	<view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
			<u-row>
				<u-col span="11" text-align="center">
					<scan></scan>
					<scanner></scanner>
					<sm></sm>
					<honeywell></honeywell>
					<hk></hk>
					<u-search placeholder="输入商品关键词搜索" :clearabled="true" v-model="keyword" border-color="#606266"
						@custom="search" @search="search"></u-search>
				</u-col>
				<u-col span="1" text-align="center" @click="scang()">
					<view class="u-m-t-14 weikaishi5">
						<u-icon name="scan" color="#2b85e4" size="45"></u-icon>
					</view>
				</u-col>

			</u-row>
		</view>
		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="sectionChange"></u-tabs>
		</u-sticky>
		<view v-if="current == 0">
			<u-card padding="16" v-if="goodsId">
				<view class="" slot="head">
					<view class="wrap">
						<u-row v-model="goodsOne">
							<u-col span="1" text-align="center">
								<view class="u-line-1 u-m-t-8">
									<u-icon name="https://z3.ax1x.com/2021/07/19/WJFqj1.png" color="#2b85e4" size="35">
									</u-icon>
								</view>
							</u-col>
							<u-col span="10">
								<view class="weikaishi5">
									<span v-html="goodsOne.goodsName"></span>
								</view>
							</u-col>

							<u-col span="6" text-align="left">
								<view class="u-line-1 weikaishi3">
									<span>编号:{{goodsOne.goodsNumber}}</span>
								</view>
							</u-col>
							<u-col span="6" text-align="left">
								<view class="u-line-1 weikaishi3">
									<span>条码:{{goodsOne.goodsPcode69}}</span>
								</view>
							</u-col>
							<u-col span="6" text-align="left">
								<view class="u-line-1 weikaishi3">
									<span>规格:{{goodsOne.goodsSpecs}}</span>
								</view>
							</u-col>
							<u-col span="6" text-align="left">
								<view class="u-line-1 weikaishi3">
									<span>基本单位:{{goodsOne.jibenUnit}}</span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="" slot="body">
					<view class="wrap">
						<u-row>
							<u-col span="5" text-align="left">
								<view class="weikaishi3 u-line-1 u-m-t-10">
									<span>单位类型</span>
								</view>
							</u-col>
							<u-col span="4" text-align="left">
								<view class="weikaishi3 u-line-1 u-m-t-10">
									<span>单位</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="weikaishi3 u-line-1 u-m-t-10">
									<span>换算率</span>
								</view>
							</u-col>
						</u-row>
						<u-row v-model="goodsOne">
							<u-col span="5" text-align="left">
								<view class="u-m-t-10 weikaishi3">
									<span>库存单位</span>
								</view>
							</u-col>
							<u-col span="4" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3">
									<span>{{goodsOne.kcUnit}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3 yiwancheng">
									<span>{{goodsOne.kcRate}}</span>
								</view>
							</u-col>
							<u-col span="5" text-align="left">
								<view class="u-m-t-10 weikaishi3">
									<span>采购单位</span>
								</view>
							</u-col>
							<u-col span="4" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3">
									<span>{{goodsOne.cgUnit}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3 yiwancheng">
									<span>{{goodsOne.cgRate}}</span>
								</view>
							</u-col>
							<u-col span="5" text-align="left">
								<view class="u-m-t-10 weikaishi3">
									<span>配送单位</span>
								</view>
							</u-col>
							<u-col span="4" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3">
									<span>{{goodsOne.psUnit}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3 yiwancheng">
									<span>{{goodsOne.psRate}}</span>
								</view>
							</u-col>
							<u-col span="5" text-align="left">
								<view class="u-m-t-10 weikaishi3">
									<span>批发单位</span>
								</view>
							</u-col>
							<u-col span="4" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3">
									<span>{{goodsOne.pfUnit}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi3 yiwancheng">
									<span>{{goodsOne.pfRate}}</span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-card>
		</view>
		<view v-if="current == 1">
			<view class="wrap">
				<u-row justify="space-between">
					<u-col span="6" text-align="center">
						<view class="demo-layout weikaishi2 u-line-1 u-m-t-14">
							<span v-html="warehouseName"></span>
						</view>
					</u-col>
					<u-col span="6" text-align="center">
						<view class="demo-layout weikaishi4 u-line-1 u-m-t-14" @click="xuanzecangku()">
							<u-icon name="search" color="#2b85e4" label-color="#2b85e4" size="40" label="选择仓库"
								labelSize="35"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>

			<u-card padding="16">
				<view class="" slot="body">
					<view class="wrap">
						<u-row>
							<u-col span="2" text-align="left">
								<view class="weikaishi6 u-line-1 u-m-t-10">
									<span>状态</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="weikaishi6 u-line-1 u-m-t-10">
									<span>编号</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="weikaishi6 u-line-1 u-m-t-10">
									<span>数量</span>
								</view>
							</u-col>
							<u-col span="2" text-align="left">
								<view class="weikaishi6 u-line-1 u-m-t-10">
									<span>日期</span>
								</view>
							</u-col>
							<u-col span="2" text-align="left">
								<view class="weikaishi6 u-line-1 u-m-t-10">
									<span>操作</span>
								</view>
							</u-col>
						</u-row>
						<u-row v-for="item in findwarehouselist" :key="item.id">
							<u-col span="2" text-align="left">
								<view class="u-m-t-10 weikaishi6">
									<span>{{item.stockState}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-m-t-10 weikaishi6">
									<span>{{item.positionNumber}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi6">
									<span>{{item.kcNum}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="left">
								<view class="u-line-1 u-m-t-10 weikaishi6">
									<span>{{item.detailedDate}}</span>
								</view>
							</u-col>
							<!-- 库存处置 -->
							<u-col span="1" text-align="left">
								<u-button size="mini" @click="showDisposePopup(item)" type="primary">改</u-button>
							</u-col>
						</u-row>
						<view>
							<u-toast ref="uToast" />
						</view>
						<!-- 弹出层 -->
						<u-popup v-model="popupShow4" mode="center" closeable width="550rpx" height="600rpx"
							border-radius="10">
							<view class="popup-content">
								<u-form>
									<u-form-item label="数量">
										<u-input v-model="fromgz.kcNum" placeholder="请输入处置数量" type="number"></u-input>
									</u-form-item>
									<u-form-item label="日期">
										<u-input v-model="fromgz.detailedDate" placeholder="请现在修改后的日期" type="select"
											@click="getT()"></u-input>
									</u-form-item>
									<u-button type="primary" formType="submit" @click="handleSubmit">提交修改</u-button>
									<!-- <u-button type="default" @click="closePopup">取消</u-button> -->
									</u-form-item>
								</u-form>

							</view>
						</u-popup>
					</view>
				</view>
			</u-card>
		</view>

		<view>
			<u-calendar v-model="show" mode="date" max-date="2070-01-01" @change="change"></u-calendar>
		</view>

		<u-popup v-model="popupShow2" mode="center" closeable width="550rpx" height="600rpx">
			<view class="wrap">
				<u-row v-for="(item,index) in glist" :key="index" @click="xuanzegoods(item)">
					<u-row>
						<u-col span="1" text-align="center">
							<view class="u-line-1 u-m-t-8">
								<u-icon name="https://z3.ax1x.com/2021/07/19/WJFqj1.png" color="#2b85e4" size="30">
								</u-icon>
							</view>
						</u-col>
						<u-col span="11">
							<view class="weikaishi3">
								<span v-html="item.goodsName"></span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-m-t-10 weikaishi heise">
								<view class="u-m-t-10 weikaishi lanse">编号:{{item.goodsNumber}}</view>
								<view>条码:{{item.goodsPcode69}}</view>
								<view class="u-m-t-5">客户:{{item.goodsCustomerName}}</view>
								<view class="u-m-t-5">规格:{{item.goodsSpecs}}</view>
								<view class="u-m-t-5">品牌:{{item.goodsBrand}}</view>
								<view class="u-m-t-5" style="color: #e64340;">库存数量:{{item.jibenNum || 0}} {{item.jibenUnit}}</view>
								<!-- 显示化箱信息 -->
								<view class="u-m-t-5 weikaishi2" v-if="item.huaXiangResult">
									<span style="color: #2b85e4;">化箱: {{item.huaXiangResult}}</span>
								</view>
							</view>
						</u-col>
					</u-row>
				</u-row>
			</view>
		</u-popup>
		<view>
			<u-select v-model="popupShow" :list="wlist" @confirm="definexuanzecangku"></u-select>
		</view>
	</view>
</template>

<script>
	import scan from "@/components/uni-scan/scan.vue"
	import scanner from "@/components/uni-scan/scanner.vue"
	import sm from "@/components/uni-scan/sm.vue"
	import honeywell from "@/components/uni-scan/honeywell.vue"
	import hk from "@/components/uni-scan/hk.vue"

	export default {
		components: {
			scanner,
			scan,
			sm,
			honeywell,
			hk
		},
		data() {
			return {
				flex: '',
				keyword: '',
				list: [{
						name: '基本信息'
					},
					{
						name: '库存信息'
					}
				],
				current: 0,
				popupShow: false,
				popupShow2: false,
				popupShow4: false,
				show: false,

				wlist: [],
				glist: [],
				warehouseId: '',
				warehouseName: '',

				goodsId: '',
				goodsOne: {},
				findwarehouselist: [],
				fromgz: {}, //wangzhen
			};
		},
		onShow: function() {
			let that = this
			uni.$off('scan') // 每次进来先 移除全局自定义事件监听器  
			uni.$on('scan', function(res) {
				console.log('扫码结果：', res.codeStr);
				that.keyword = res.codeStr;
				that.search()
			})
			uni.$off('scanner') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scanner', function(res) {
				console.log('扫码结果：', res.code);
				that.keyword = res.code;
				that.search()
			})
			uni.$off('sm') // 每次进来先 移除全局自定义事件监听器
			uni.$on('sm', function(res) {
				console.log('扫码结果：', res.code);
				that.keyword = res.code;
				that.search()
			})
			uni.$off('honeywell') // 每次进来先 移除全局自定义事件监听器
			uni.$on('honeywell', function(res) {
				console.log('扫码结果：', res.code);
				that.keyword = res.code;
				that.search()
			})
			uni.$off('hk') // 每次进来先 移除全局自定义事件监听器
			uni.$on('hk', function(res) {
				console.log('扫码结果：', res.code);
				that.keyword = res.code;
				that.search()
			})
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.$http.post('/rest/storage/Warehouselist', {}, {
				params: {},
				header: {
					'Authorization': uni.getStorageSync('token'),
				}
			}).then(res => {
				if (res.data.data.length > 0) {
					this.warehouseId = res.data.data[0].id
					this.warehouseName = res.data.data[0].warehouseName
					for (let item1 of res.data.data) {
						let obj = {}
						obj.value = item1.id
						obj.label = item1.warehouseName
						this.wlist.push(obj)
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '未查询到仓库信息',
						duration: 2000
					});
					setTimeout(() => {
						this.$Router.back()
					}, 1000)
				}
			})
		},
		methods: {
			scang() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.keyword = res.result
						that.search()
					},
				})
			},
			findGoodsSum() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/hxStorageStock/findGoodsOneBySpec', {}, {
					params: {
						goodsId: this.goodsId,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.data != null) {
						this.goodsOne = res.data.data
					} else {
						this.goodsOne = {}
						uni.showToast({
							title: "暂无库存数据",
							icon: 'none'
						})
					}
				})
				this.$http.post('/rest/hxStorageStock/findKcListBySpec', {}, {
					params: {
						goodsId: this.goodsId,
						warehouseId: this.warehouseId,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data.data != '') {
						this.findwarehouselist = res.data.data
					} else {
						this.findwarehouselist = []
						uni.showToast({
							title: "暂无库存数据",
							icon: 'none'
						})
					}
				})
			},
			xuanzegoods(item) {
				this.goodsId = item.id
				this.popupShow2 = false
				this.findGoodsSum()
			},
			search() {
				console.log(1111111111111)
				console.log(this.keyword)
				if (this.keyword == '') {
					uni.showToast({
						title: "请输入搜索条件",
						icon: 'none'
					})
				}
				this.$http.post('/rest/hxStorageStock/goodslist', {}, {
					params: {
						condition: this.keyword
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.data != '') {
						console.log('res: ', res.data.data)
						let arr = []
						let inta = 0
						for (let item1 of res.data.data) {
							if (inta != 20) {
								arr.push(item1)
							} else {
								break
							}
							inta++
						}
						this.glist = arr
						this.popupShow2 = true
					} else {
						uni.showToast({
							title: "查无结果，请重新输入搜索条件",
							icon: 'none'
						})
					}

				})
			},
			definexuanzecangku(e) {
				this.warehouseId = e[0].value
				this.warehouseName = e[0].name
				this.popupShow = false
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/hxStorageStock/findKcListBySpec', {}, {
					params: {
						goodsId: this.goodsId,
						warehouseId: this.warehouseId,
					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data.data != '') {
						this.findwarehouselist = res.data.data
					} else {
						this.findwarehouselist = []
						uni.showToast({
							title: "暂无库存数据",
							icon: 'none'
						})
					}
				})
			},
			xuanzecangku() {
				this.popupShow = true
			},
			sectionChange(e) {
				this.current = e
			},
			showDisposePopup(item) {
				this.fromgz = item
				this.popupShow4 = true
			},
			//   // 关闭弹出层
			//   closePopup() {
			//     this.popupShow4 = false;   
			// // this.fromgz = item 
			//     //this. // 重置表单
			//   },
			// 修改日期处理表单提交
			handleSubmit() {
				// 处理库存处置逻辑
				// console.log('提交的处置信息:', this.fromgz);
				// 可以在这里处理数据提交到后台

				this.$http.post('/rest/hxStorageStock/updateDetailedDate', {}, {
					params: {
						id: this.fromgz.id,
						detailedDate: this.fromgz.detailedDate,
						stockState: this.fromgz.stockState,
						kcNum: this.fromgz.kcNum

					},
					header: {
						'Authorization': uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success'
						})
						this.search()
						this.popupShow4 = false
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})

					}
				})
			},
			// this.closePopup();
			getT() {
				this.show = true
			},
			change(e) {
				this.fromgz.detailedDate = e.result
			}


		}
	};
</script>
<style lang="scss">
	.chen-icon {
		position: absolute;
		margin-left: 2%;
		z-index: 1; //要害代码
	}

	.u-body-item {
		padding: 20rpx 15rpx;
	}

	.wrap {
		padding: 10rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}

	.demo-layout {
		height: 40rpx;
		border-radius: 8rpx;
		line-height: 40rpx;
	}

	.demo-layout2 {
		height: 165rpx;
		border-radius: 8rpx;
	}

	.demo-layout3 {
		height: 900rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #ffffff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.weikaishi2 {
		font-size: 37rpx;
	}

	.weikaishi3 {
		font-size: 30rpx;
	}

	.weikaishi6 {
		font-size: 20rpx;
	}

	.weikaishi4 {
		font-size: 35rpx;
	}

	.weikaishi5 {
		font-size: 40rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.jiange {
		border-bottom: 1px solid #e1e1e1;
	}
</style>